/*
 Licensed to Cloudera, Inc. under one
 or more contributor license agreements.  See the NOTICE file
 distributed with this work for additional information
 regarding copyright ownership.  Cloudera, Inc. licenses this file
 to you under the Apache License, Version 2.0 (the
 "License"); you may not use this file except in compliance
 with the License.  You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/
@import (reference) "hue-mixins.less";
@import (reference) "cui/variables.less";

@sidebar-bg-color: #132329;

.login-page {
  .fillAbsolute();
  .display-flex();
  .flex-direction(column);

  background-color: #f8f8f8;
}

#login-modal {
  padding: 0 !important;
  box-shadow: none;
  background: transparent;
  border: none;

  > .login-container {
    border: 1px solid transparent !important;
  }
}

.login-container {
  .flex(0 1 auto);
  .hue-box-shadow-bottom;

  width: 500px;
  display: block;
  margin: auto;
  border: 1px solid @cui-default-border-color;
  border-radius: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='248' height='196' viewBox='0 0 248 196'%3E%3Cdefs%3E%3Cpath id='6zd0wr4qxa' d='M0 0H248V196H0z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg%3E%3Cg%3E%3Cg transform='translate(-125 -842) translate(125 270) translate(0 572)'%3E%3Cmask id='4w2gcddqub' fill='%23fff'%3E%3Cuse xlink:href='%236zd0wr4qxa'/%3E%3C/mask%3E%3Cuse fill='%23132329' xlink:href='%236zd0wr4qxa'/%3E%3Cg mask='url(%234w2gcddqub)' opacity='.503'%3E%3Cg%3E%3Cpath fill='%2319323C' d='M117.744 164.685L0 282.43 42.867 282.43 160.612 164.685z' transform='translate(53 -87)'/%3E%3Cpath fill='%23224452' d='M282.73 0L117.913 164.685 160.612 164.685 42.868 282.429 349.591 282.459 349.591 0.002z' transform='translate(53 -87)'/%3E%3Cg%3E%3Cpath fill='%23224452' d='M148.278 0L146.067 0 28.322 117.745 30.533 117.745zM141.346 0L23.602 117.745 25.813 117.745 143.558 0zM35.253 117.745L152.998 0 150.786 0 33.041 117.745zM39.973 117.745L157.718 0 155.507 0 37.762 117.745zM136.626 0L18.881 117.745 21.092 117.745 138.838 0zM122.466 0L4.721 117.745 6.933 117.745 124.677 0zM117.746 0L0 117.745 2.212 117.745 119.956 0zM127.187 0L9.441 117.745 11.653 117.745 129.398 0zM131.907 0L14.161 117.745 16.372 117.745 134.118 0z' transform='translate(53 -87) translate(13.957 108.673)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  background-position: right bottom;
  background-repeat: no-repeat;
  background-color: @sidebar-bg-color;

  a {
    white-space: normal;
  }

  select {
    width: 100%;
  }

  .logo {
    height: 70px;
    text-align: center;
    margin: 35px auto;

    img {
      margin-top: 2px;
    }
  }

  h3 {
    color: @hue-primary-color-dark;
    margin-bottom: 25px;
    text-align: center;
  }

  .empty-logo {
    background-color: @cui-white;
    width: 70px;
    height: 70px;
  }

  form {
    margin-left: 75px;
    margin-right: 75px;

    input[type='submit'],
    .login-container form select {
      width: 100%;
    }

    .text-input {
      padding: 0;
      border: 1px solid @cui-gray-400;
      border-radius: 4px;
      margin-bottom: 20px;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
      -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
      transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;

      input:focus {
        border-color: initial !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
      }

      &.error {
        border-color: @cui-red-500;
      }
    }

    ul.errorlist li {
      color: @cui-red-500;
      padding: 0;
      font-weight: normal;
      font-style: normal;
      margin-top: -10px;
      margin-bottom: 20px;
    }

    input[type='text'],
    input[type='email'],
    input[type='password'],
    input[type='text']:hover,
    input[type='password']:hover {
      padding: 1px 10px 1px 19px;
      box-sizing: border-box;
      border: none;
      box-shadow: none;
      background: @cui-white;
      height: 44px;
      font-size: 14px;
      color: @cui-gray-800;
      font-weight: 400;
      resize: none;
      margin: 0;
      width: 100%;
    }

    input[type='submit'] {
      height: 45px;
      min-height: 45px;
      font-weight: normal;
      text-shadow: none;
      margin-left: 0;
      border-radius: 3px;
      font-size: 16px;
      margin-bottom: 55px;
    }
  }

  h4 {
    text-align: center;
    margin-bottom: 20px;
  }
}

input[type='password']::-ms-reveal {
  display: none;
}

.tooltip {
  z-index: 10000;
}

.trademark {
  .flex(0 1 auto);

  margin-left: auto;
  margin-right: auto;
  padding-bottom: 10px;
}

.svg-hue-logo-main {
  fill: @hue-primary-color-dark;
}

.svg-hue-logo-trunk {
  fill: @hue-trunk;
}

@-webkit-keyframes autofill {
  to {
    background: transparent;
  }
}

:-webkit-autofill {
  -webkit-animation-name: autofill;
  -webkit-animation-fill-mode: both;
}

:-webkit-autofill,
:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
}
